<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
		<title>西语日常</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/article_list.css" />
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="banner" id="banner" v-cloak>
			<div>
				<img v-for="banners in banner_all.banner_pics" v-bind:src="banners" />
			</div>
			<div class="spot">
				<ul>
					<li v-for="banners in banner_all.banner_pics"></li>
				</ul>
			</div>
		</div>
		<div class="content" id="article_list" v-cloak>
			<div v-for="list in article_all">
				<a :href="'article' + '.html?id='+ list.article_id">
					<div>
						<div>
							<img v-bind:src="list.article_pic" alt=" " />
						</div>
						<div class="text">
							<p>{{list.article_title}}</p>
							<p v-html="list.article_desc"></p>
						</div>
					</div>
				</a>
			</div>
		</div>
		<script src="js/jquery-1.9.1.min.js " type="text/javascript " charset="utf-8 "></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js " type="text/javascript " charset="utf-8 "></script>
		<script type="text/javascript ">
			//调用轮播图接口,美文欣赏
			$.ajax({
				url: apiPath + 'common/banner',
				type: 'post',
				dataType: 'json',
				data: {
					banner_type: 7,
					flagsign: 1
				},
				success: function(data) {
					console.log(data)
					var right = new Vue({
						el: '#banner ',
						data: {
							banner_all: data.returnData,
						},
						mounted: function() {
							var index = 0;

							function play(index) {
								// 大图切换 ：大图显示，其余的大图隐藏（当前元素的前后兄弟元素隐藏）
								$(".banner>div img").eq(index).show().siblings('img').hide();
							}
							// 自动播放
							function autoPlay() {
								//创建定时器，每一毫米调用一次play()
								timer = setInterval(function() {
									//下一张 索引值++
									index++;
									//边界判断 索引值=10，重新赋值
									index = index % data.returnData.banner_pics.length;
									//调用play()
									play(index);
								}, 2000);
								//		console.log(timer);

							};
							// 启动自动播放
							autoPlay();
						}
					});
				}
			});
			//调用列表接口，美文欣赏
			$.ajax({
				url: apiPath + 'article/get-list',
				type: 'post',
				dataType: 'json',
				data: {
					article_type: 4,
					flagsign: 1
				},
				success: function(data) {
					console.log(data)
					var right = new Vue({
						el: '#article_list ',
						data: {
							article_all: data.returnData,
						},
					});
				}
			});
		</script>
	</body>

</html>